// 获取DOM元素
const li = document.querySelectorAll('li')

const int = document.querySelector('.int')
const main = document.querySelector('.main')
const time = document.querySelector('.time')

// --1.键盘按下,将数据添加到数组中
let arr = []
int.onkeydown = function (e) {
  if (e.code === 'Enter') {
    if (int.value) {
      arr.push(int.value)
      int.value = ''
      render(arr)
    } else {
      alert('请输入内容');
    }
  }
}
// 2.加工数组,将数据添加的Dom
function render(data) {
  const arr1 = data.map(item => {
    return `
      <p>${item}</p>
      `
  })
  const str = arr1.join('')
  main.innerHTML = str
}

// --1.每隔一秒重新获取时间戳,并再次将时间添加到Dom
setInterval(function () {
  const date = new Date()
  time.innerHTML = getTime(date)
}, 1000)

// 2.时间戳格式转换函数
function getTime(time) {
  let YYYY = time.getFullYear()
  let MM = time.getMonth() + 1
  let DD = time.getDate()
  let HH = time.getHours()
  let mm = time.getMinutes()
  let ss = time.getSeconds()

  const shijian = YYYY + '年' + MM + '月' + DD + '日' + HH + '时' + mm + '分' + ss + '秒'
  return shijian
}

// 
 const message = document.querySelector('.message')
 const game = document.querySelector('.game')
 const xinxi = document.querySelector('.xinxi')
li[0].onclick = function () {
  message.style.display = 'block'
  game.style.display = 'none'

}
li[1].onclick = function () {
  message.style.display = 'none'
  game.style.display = 'block'
}
li[2].onclick = function () {
  message.style.display = 'none'
  xinxi.style.display = 'block'
}

// 思路:1.时间每秒减1,到0再从60 开始
// 2.值为60时,筛子开始转圈
// 3.值为40时,筛子停下

const gameTime = document.querySelector('.gameTime')
const dian = document.querySelectorAll('.dian')
const btn = document.querySelector('.btn')


let zongdian = ['dian1','dian2','dian3','dian4','dian5','dian6','dian7','dian8','dian9','dian10']
let zongdian2 = ['dian7','dian8','dian9','dian10']
// 1.每秒减1,到0再从60开始
let gameTimes = 60
setInterval(function () {
  gameTime.innerHTML = gameTimes--

  if (gameTimes === 59) {
    mei()
  }else if(gameTimes === 40){
    clearInterval(ding)
    mei2()
  }else if(gameTimes === 0){
    gameTimes = 60
   }
}, 1000)

// 获取随机数,将值添加到DOM
let ding = null
function mei(){
 ding = setInterval(function(){
  let suiji1 = Math.floor(Math.random() * (4))
  let suiji2 = Math.floor(Math.random() * (4))
  let suiji3 = Math.floor(Math.random() * (4))
  console.log(suiji1,suiji2,suiji3);
  //  先删除身上的类名
  for(let i = 0;i < zongdian2.length;i++) {
    dian[0].classList.remove(zongdian2[i])
    dian[1].classList.remove(zongdian2[i])
    dian[2].classList.remove(zongdian2[i])
  }
  // 再添加新的类名
      dian[0].classList.add(zongdian2[suiji1])
      dian[1].classList.add(zongdian2[suiji2])
      dian[2].classList.add(zongdian2[suiji3])

},100)
 return
}



function mei2(){
  let suiji4 = Math.floor(Math.random() * (6))
  let suiji5 = Math.floor(Math.random() * (6))
  let suiji6 = Math.floor(Math.random() * (6))
  console.log(suiji4,suiji5,suiji6,'这是二');
  //  先删除身上的类名
  for(let i = 0;i < zongdian.length;i++) {
    dian[0].classList.remove(zongdian[i])
    dian[1].classList.remove(zongdian[i])
    dian[2].classList.remove(zongdian[i])
  }
  // 再添加新的类名
  dian[0].classList.add(zongdian[suiji4])
  dian[1].classList.add(zongdian[suiji5])
  dian[2].classList.add(zongdian[suiji6])
  
  let dianhe = suiji4+1+suiji5+1+suiji6+1
  let dianshu = [suiji4+1,suiji5+1,suiji6+1]
  let daxiao = '大'
  let xuhao = 0
  if(dianhe > 10){
    daxiao = '大'
  }else{
    daxiao = '小'
  }

  // 将随机出来的点数渲染出来
  const tbody = document.querySelector('tbody')
  tbody.innerHTML = `
  <tr>
  <td>${xuhao++}</td>
  <td>${dianshu.join(' ')}</td>
  <td>${daxiao}</td>
  <td>平</td>
</tr>
  `
}

// 4

let infoArr = []

// 获取form表单
const form = document.querySelector('.info')
// 注册提交事件
form.addEventListener('submit',function(e){
  // 阻止默认行为
 e.preventDefault()
// 获取Dom元素
 const uname = document.querySelector('.uname').value.trim()
const age = document.querySelector('.age').value.trim()
const gender = document.querySelector('.gender').value
const salary = document.querySelector('.salary').value.trim()
const modie = document.querySelector('.modie').value.trim()
const add = document.querySelector('.add')
// 非空判断
if(uname.length === 0 || age.length === 0 || salary.length === 0 || modie.length === 0 ) return alert('请输入正确内容');

let infoObj = {
  id: infoArr.length + 1,
 uname: uname,
 age:age,
 gender:gender,
 salary:salary,
 modie:modie,
}
// 将对象添加到数组中
infoArr.push(infoObj)
// 调用函数并传值
biaodan(infoArr)
 // js 表单对象 reset() 清空表单
 this.reset()
 
})

function biaodan(data){
  const newArr =  data.map(function(item,index){
   return `<tr>
   <td>${item.id}</td>
   <td>${item.uname}</td>
   <td>${item.age}</td>
   <td>${item.gender}</td>
   <td>${item.salary}</td>
   <td>${item.modie}</td>
   <td>
     <a href="javascript:" data-index='${index}'>删除</a>
   </td>
 </tr> `
  })
  const str = newArr.join('')
      document.querySelector('.meixiang').innerHTML = str
}

document.querySelector('.meixiang').addEventListener('click',function(e){
 if(e.target.tagName === 'A'){
 const index = e.target.dataset.index 
 if(confirm('确定要删除吗?')){
//  删除数组中的数据
infoArr.splice(index,1)
// 数据驱动视图
biaodan(infoArr)
 }
}
})













